<!doctype html>
<html class="no-js">
<head>
    <meta charset="utf-8">
    <title>Angular Gantt - Gantt chart component for AngularJS (Demo)</title>
    <meta name="description" content="Gantt chart component for AngularJS">
    <meta name="viewport" content="width=device-width">

    <link rel="canonical" href="https://www.angular-gantt.com/">
    <link rel="shortcut icon" href="https://www.angular-gantt.com/img/favicon.ico">

    <meta property="og:title" content="Angular Gantt (Demo)" />
    <meta property="og:description" content="Gantt chart component for AngularJS" />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://www.angular-gantt.com/demo/" />
    <meta property="og:image" content="https://www.angular-gantt.com/img/angular-gantt.png" />
</head>
<body ng-app="gantt.demo" ng-strict-di><!-- ng-strict-di-->
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->

<!-- Add your site or application content here -->
<a href="https://github.com/angular-gantt/angular-gantt" target="_blank"><img style="position: absolute; z-index:10000; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>

<div ng-controller="DemoCtrl">
    <div class="navbar navbar-default" role="navigation" bs-navbar>
        <div class="navbar-header">
            <a class="navbar-brand" href="http://www.angular-gantt.com">angular-gantt - Gantt chart component for AngularJS</a>
        </div>
        <div class="navbar-right navbar-right-spacing">
            <a class="navbar-text navbar-link" href="http://www.angular-gantt.com"><i class="fa fa-book"></i> Documentation</a>
            <a class="navbar-text navbar-link" href="https://github.com/angular-gantt/angular-gantt"><i class="fa fa-github"></i> GitHub</a>
        </div>
    </div>

    <div class="container-content" ng-show="false">
        <div class="container-fluid">
            <div class="row top-buffer">
                <div class="col-md-12">
                    <i class="fa fa-cog fa-spin"></i> Loading angular-gantt demo ...
                </div>
            </div>
        </div>
    </div>

    <div class="container-content" ng-cloak="true">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">
                    <div class="panel-group" bs-collapse>
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h4 class="panel-title">
                                    <a href="" bs-collapse-toggle>Options</a>
                                </h4>
                            </div>
                            <div class="panel-collapse" bs-collapse-target>
                                <div class="panel-body">
                                    <div class="container-fluid">
                                        <div class="row">
                                            <div class="form-inline">
                                                <div class="form-group text-center">
                                                    <label class="control-label"><i class="fa fa-search"></i> Scale</label><br>
                                                    <button type="button" style="width: 5em; text-align: left" class="btn btn-default" ng-model="options.scale" bs-options="s for s in ['minute', '5 minutes', 'hour', '3 hours', 'day', 'week', '2 weeks', 'month', 'quarter', '6 months', 'year']" bs-select></button>
                                                </div>
                                                <div class="form-group text-center">
                                                    <label class="control-label"><i class="fa fa-sort"></i> Sort</label><br>
                                                    <button type="button" style="width: 6em; text-align: left" class="btn btn-default" ng-model="options.sortMode" bs-options="m.value as m.label for m in [{label: 'disabled', value: undefined}, {label: 'name', value: 'model.name'}, {label: 'from', value: 'from'}, {label: 'to', value: 'to'}]" bs-select></button>
                                                </div>
                                                <div class="form-group input-append text-center">
                                                    <label class="control-label"><i class="fa fa-filter"></i> Filter Tasks</label><br>
                                                    <input type="text" class="form-control" style="width: 8em; text-align: left" ng-model="options.filterTask">
                                                </div>
                                                <div class="form-group input-append text-center">
                                                    <label class="control-label"><i class="fa fa-filter"></i> Filter Rows</label><br>
                                                    <input type="text" class="form-control" style="width: 8em; text-align: left" ng-model="options.filterRow">
                                                </div>

                                                <div class="form-group text-center">
                                                    <label class="control-label"><i class="fa fa-clock-o"></i> Today</label><br>
                                                    <button type="button" style="width: 6em; text-align: left" class="btn btn-default" ng-model="options.currentDate" bs-options="d for d in ['none', 'line', 'column']" bs-select></button>
                                                </div>

                                                <div class="form-group text-center">
                                                    <label class="control-label"><i class="fa fa-expand"></i> Expand</label><br>
                                                    <button type="button" style="width: 6em; text-align: left" class="btn btn-default" ng-model="options.autoExpand" bs-options="e for e in ['none', 'both', 'left', 'right']" bs-select></button>
                                                </div>

                                                <div class="form-group text-center">
                                                    <label class="control-label"><i class="fa fa-scissors"></i> Out of range</label><br>
                                                    <button type="button" style="width: 8em; text-align: left" class="btn btn-default" ng-model="options.taskOutOfRange" bs-options="e for e in ['expand', 'truncate']" bs-select></button>
                                                </div>

                                                <div class="form-group text-center">
                                                    <label class="control-label"><i class="fa fa-pencil-square-o"></i> Edit</label><br>
                                                    <button type="button" class="btn btn-default" ng-model="options.draw" bs-checkbox>Draw</button>
                                                    <button type="button" class="btn btn-default" ng-model="options.readOnly" bs-checkbox>Read Only</button>
                                                </div>

                                                <div class="form-group text-center">
                                                    <label class="control-label"><i class="fa fa-magnet"></i> Magnet</label><br>
                                                    <button type="button" style="width: 8em; text-align: left" class="btn btn-default" ng-model="options.columnMagnet" bs-options="m for m in ['column', '1 second', '1 minute', '5 minutes', '15 minutes', '1 hour', '1 day', '5 days']" bs-select></button>
                                                    <button type="button" class="btn btn-default" ng-model="options.daily" bs-checkbox>Daily</button>
                                                    <button type="button" class="btn btn-default" ng-model="options.timeFramesMagnet" bs-checkbox>TimeFrames</button>
                                                </div>

                                                <div class="form-group text-center">
                                                    <label class="control-label"><i class="fa fa-bars"></i> Side</label><br>
                                                    <div class="btn-group" bs-checkbox-group>
                                                        <button type="button" style="width: 8em; text-align: left" class="btn btn-default" ng-model="options.sideMode" bs-options="s for s in ['Tree', 'Table', 'TreeTable', 'Disabled']" bs-select></button>
                                                    </div>
                                                </div>

                                                <div class="form-group text-center">
                                                    <label class="control-label"><i class="fa fa-gear"></i> Groups</label><br>
                                                    <div class="btn-group" bs-checkbox-group>
                                                        <button type="button" style="width: 8em; text-align: left" class="btn btn-default" ng-model="options.groupDisplayMode" bs-options="s for s in ['group', 'overview', 'promote', 'Disabled']" bs-select></button>
                                                    </div>
                                                </div>

                                                <div class="form-group text-center">
                                                    <label class="control-label"><i class="fa fa-crop"></i> Layout</label><br>
                                                    <div class="btn-group" bs-checkbox-group>
                                                        <button type="button" class="btn btn-default" ng-model="options.maxHeight" bs-checkbox>Height</button>
                                                        <button ng-disabled="!canAutoWidth(options.scale)" type="button" class="btn btn-default" ng-model="options.width" bs-checkbox>Width</button>
                                                    </div>
                                                </div>

                                                <div class="form-group text-center">
                                                    <label class="control-label"><i class="fa fa-search"></i> Zoom</label><br>
                                                    <input ng-disabled="!options.width" type="number" ng-model="options.zoom" step="0.1" min="0.1" max="5" class="form-control" />
                                                </div>


                                                <div class="form-group text-center">
                                                    <label class="control-label"><i class="fa fa-text-width"></i> Labels</label><br>
                                                    <div class="btn-group" bs-checkbox-group>
                                                        <button type="button" class="btn btn-default" ng-model="options.labelsEnabled" bs-checkbox>Show</button>
                                                        <button type="button" class="btn btn-default" ng-model="options.allowSideResizing" bs-checkbox>Resizable</button>
                                                    </div>
                                                </div>

                                                <div class="form-group text-center">
                                                    <label class="control-label"><i class="fa fa-code"></i> Content</label><br>
                                                    <div class="btn-group" bs-checkbox-group>
                                                        <button type="button" class="btn btn-default" ng-model="options.rowContentEnabled" bs-checkbox>Rows</button>
                                                        <button type="button" class="btn btn-default" ng-model="options.taskContentEnabled" bs-checkbox>Tasks</button>
                                                    </div>
                                                </div>

                                                <div class="form-group text-center">
                                                    <label class="control-label"><i class="fa fa-calendar"></i> <i class="fa fa-arrows-h"></i> <i class="fa fa-calendar"></i> Date range</label><br>
                                                    <div class="form-group">
                                                        <input type="text" class="form-control" ng-model="options.fromDate" max-date="{{options.toDate}}" start-date="{{options.currentDateValue.toString()}}" start-week="1" placeholder="From" bs-datepicker>
                                                    </div>
                                                    <div class="form-group">
                                                        <input type="text" class="form-control" ng-model="options.toDate" min-date="{{options.fromDate}}" start-date="{{options.currentDateValue.toString()}}" start-week="1" placeholder="To" bs-datepicker>
                                                    </div>
                                                </div>

                                                <div class="form-group text-center">
                                                    <div class="form-group">
                                                        <label class="control-label"><i class="fa fa-sign-out"></i> Working</label><br>
                                                        <button type="button" style="width: 8em; text-align: left" class="btn btn-default" ng-model="options.timeFramesWorkingMode" bs-options="e for e in ['visible', 'hidden', 'cropped']" bs-select></button>
                                                    </div>

                                                    <div class="form-group">
                                                        <label class="control-label"><i class="fa fa-sign-out"></i> Non-working</label><br>
                                                        <button type="button" style="width: 8em; text-align: left" class="btn btn-default" ng-model="options.timeFramesNonWorkingMode" bs-options="e for e in ['visible', 'hidden', 'cropped']" bs-select></button>
                                                    </div>
                                                </div>

                                                <div ng-if="options.sideMode === 'Tree' || options.sideMode === 'TreeTable'" class="form-group text-center">
                                                    <label class="control-label"><i class="fa fa fa-chevron-circle-right"></i> Tree actions</label><br>
                                                    <div class="btn-group">
                                                        <button class="btn btn-default" ng-click="expandAll()">Expand all</button>
                                                        <button class="btn btn-default" ng-click="collapseAll()">Collapse all</button>
                                                    </div>
                                                </div>

                                                <div class="form-group text-center">
                                                    <div class="form-group">
                                                        <label class="control-label"><i class="fa fa-link"></i> Dependencies</label><br>
                                                        <button type="button" class="btn btn-default" ng-model="options.dependencies.enabled" bs-checkbox>Enabled</button>
                                                        <button type="button" class="btn btn-default" ng-model="options.dependencies.conflictChecker" bs-checkbox>Conflicts</button>
                                                    </div>
                                                </div>

                                                <div class="form-group text-center">
                                                    <label class="control-label"><i class="fa fa-database"></i> Data actions</label><br>
                                                    <div class="btn-group">
                                                        <button class="btn btn-default" ng-click="reload()">Reload</button>
                                                        <button class="btn btn-default" ng-click="remove()">Remove</button>
                                                        <button class="btn btn-default" ng-click="clear()">Clear</button>
                                                    </div>
                                                </div>

                                                <div class="form-group text-center">
                                                    <label class="control-label"><i class="fa fa-database"></i>Add Overlapping Task</label><br>
                                                    <div class="form-group">
                                                        <input type="number" ng-model="options.targetDataAddRowIndex" step="1" min="0" class="form-control" placeholder="Row Index"/>
                                                        <button class="btn btn-default" ng-click="addOverlapTaskToTargetRowIndex()">Add</button>
                                                    </div>
                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row top-buffer">
                <div class="col-md-12">
                    <div class="panel-group" bs-collapse>
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h4 class="panel-title">
                                    <a href="" bs-collapse-toggle>Gantt</a>
                                </h4>
                            </div>
                            <div class="panel-collapse" bs-collapse-target>
                                <div class="panel-body">
                                    <div gantt
                                         data="data"
                                         timespans="timespans"
                                         show-side="options.labelsEnabled"
                                         daily="options.daily"
                                         filter-task="{'name': options.filterTask}"
                                         filter-row="{'name': options.filterRow}"
                                         sort-mode="options.sortMode"
                                         view-scale="options.scale"
                                         column-width="getColumnWidth(options.width, options.scale, options.zoom)"
                                         auto-expand="options.autoExpand"
                                         task-out-of-range="options.taskOutOfRange"
                                         from-date = "options.fromDate"
                                         to-date = "options.toDate"
                                         allow-side-resizing = "options.allowSideResizing"
                                         task-content = "options.taskContentEnabled ? options.taskContent : undefined"
                                         row-content = "options.rowContentEnabled ? options.rowContent : undefined"
                                         current-date="options.currentDate"
                                         current-date-value="options.currentDateValue"
                                         headers="options.width && options.shortHeaders || options.longHeaders"
                                         max-height="options.maxHeight && 300 || 0"
                                         time-frames="options.timeFrames"
                                         date-frames="options.dateFrames"
                                         time-frames-working-mode="options.timeFramesWorkingMode"
                                         time-frames-non-working-mode="options.timeFramesNonWorkingMode"
                                         time-frames-magnet="options.timeFramesMagnet"
                                         api="options.api"
                                         column-magnet="options.columnMagnet">
                                        <gantt-tree enabled="options.sideMode === 'Tree' || options.sideMode === 'TreeTable'"
                                                    header-content="options.treeHeaderContent"
                                                    keep-ancestor-on-filter-row="true">
                                        </gantt-tree>
                                        <gantt-table enabled="options.sideMode === 'Table' || options.sideMode === 'TreeTable'"
                                                     columns="options.sideMode === 'TreeTable' ? options.treeTableColumns : options.columns"
                                                     headers="options.columnsHeaders"
                                                     classes="options.columnsClasses"
                                                     formatters="options.columnsFormatters"
                                                     contents="options.columnsContents"
                                                     header-contents="options.columnsHeaderContents">
                                        </gantt-table>
                                        <gantt-corner headers-labels="options.corner.headersLabels" headers-labels-templates="options.corner.headersLabelsTemplates"></gantt-corner>
                                        <gantt-groups enabled="options.groupDisplayMode === 'group' || options.groupDisplayMode === 'overview' || options.groupDisplayMode === 'promote'" display="options.groupDisplayMode"></gantt-groups>
                                        <gantt-tooltips></gantt-tooltips>
                                        <gantt-bounds></gantt-bounds>
                                        <gantt-progress></gantt-progress>
                                        <gantt-sortable></gantt-sortable>
                                        <gantt-sections></gantt-sections>
                                        <gantt-movable enabled="!options.readOnly" allow-row-switching="options.movable.allowRowSwitching"></gantt-movable>
                                        <gantt-draw-task
                                            enabled="options.canDraw"
                                            move-threshold="2"
                                            task-factory="options.drawTaskFactory">
                                        </gantt-draw-task>
                                        <gantt-overlap></gantt-overlap>
                                        <gantt-resize-sensor></gantt-resize-sensor>
                                        <gantt-dependencies
                                            enabled="options.dependencies.enabled"
                                            conflict-checker="options.dependencies.conflictChecker"
                                            read-only="options.readOnly">
                                        </gantt-dependencies>
                                    </div>
                                </div>
                                <div class="panel-body">
                                    <div class="live-table">
                                        <div class="live-cell" ng-show="live.row.tasks.length > 0">
                                            <h4><button type="button" style="text-align: left" class="btn btn-default" ng-model="live.task" bs-options="t as t.name for t in live.row.tasks" bs-select></button> (Task object)</h4>
                                            <textarea class="live-task" ng-model="live.taskJson"></textarea>
                                        </div>
                                        <div class="live-cell" ng-show="data.length > 0">
                                            <h4><button type="button" style="text-align: left" class="btn btn-default" ng-model="live.row" bs-options="r as r.name for r in data" bs-select></button> (Row object)</h4>
                                            <textarea class="live-row" ng-model="live.rowJson"></textarea>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container-content" ng-cloak="true">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">
                    <small>angular-gantt (@@version) - Gantt chart component for AngularJS | MIT License | Copyright © 2015 Marco Schweighauser and Rémi Alvergnat</small>
                </div>
            </div>
        </div>
    </div>

</div>


<!-- Google Analytics: change UA-XXXXX-X to be your site's ID
 <script>
   (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
   (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
   m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
   })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

   ga('create', 'UA-XXXXX-X');
   ga('send', 'pageview');
</script>
-->
</body>
</html>
